import React from 'react';
import {Popoverm, Button, message, Modal} from "antd";
import Slider from "react-slick"
import DragSort from "./DragSort"
import {WeaLocaleProvider, WeaTools,WeaFormItem, WeaInput,WeaMoreButton,WeaNewScroll,WeaTable} from 'ecCom'
import { WeaDialog} from 'ecCom';
const { callApi } = WeaTools;
const getLabel = WeaLocaleProvider.getLabel;

import CustomApplication from './customApplication';
import AddCustomApplication from './addCustomApplication';
import ContainerSetting from './containerSetting';
import ManagerSetting from './managerSetting'
import './style/index';
import {WeaThemeCenter} from  'weaPortalPublic';

class CustomContainer extends React.Component {

    constructor(props){
        super(props);
        this.state = {
            container: {
                user:{},
                imgs : [],
                img : "",
                customApplicationFontColor: "",
                data: [],
                data4Setting : [],


                customApplicationButtonsVisible : false,
                globalSettingButtonsVisible : false,
                showContainerSetting : false,
                rowCol: "2*3",
                addVisiable: false,
                arrayId : -1,
                editItem : {},
                authority: -1,
                deleteIds :[],
                sortIds: [],
                showOrHides: [],
                current : 0,
                scrollTop:0,
                ctrlHeight:0,
                customApplicationSizeType:'',
                customApplicationSize:"",
                openPageHelper:"",
                pageSize:"",
                managerSettingVisible:false,
                isManager:1,
                id: (!props.id ||props.id =='' )?  this.props.location.query.id : props.id,
                shareVisible: false,
                shareData:{},
                isSystem:1,
                newStyle:"",
                addOption:"1",
                sortOption:"1",
                setting:{
                    showType:'0',
                    titleFontSize:18,
                    noReadTitleFontSize:16,
                    unreadPositionLeft: -18,
                    unreadPositionTop: -10,
                    unreadCountRadius: 10,
                    noReadCountFontSize: 12,
                    unreadCountFontColor: '#ffffff',
                    unreadCountBgColor: '#f50',
                    isOpacityUnreadCountBgColor: 0,
                    unreadWidth: 36,
                    unreadHeight: 20,
                    isHasUnreadBorder: 0,
                    unreadBorderWidth: 1,
                    unreadBorderColor: '#ffffff',

                }
            }
        }
        let {id,isSetting} = this.props
        if(id == undefined){
            id = this.props.location.query.id
        }
        if(isSetting == undefined){
            isSetting = this.props.location.query.isSetting == 'true' ? true : false
        }
        this.saveCustomApplicatin(id);
    }

    componentWillMount(){
        WeaTools.callApi("/api/portalTsLogin/utils/getUser", "GET" ).then((result) => {
            this.setStateData({user:result.data})

        });

    }

    componentWillReceiveProps(nextProps){
        let {id,isSetting} = this.props
        if(id == undefined){
            id = this.props.location.query.id
        }
        if(isSetting == undefined){
            isSetting = this.props.location.query.isSetting == 'true' ? true : false
        }
        let styles = []
        let newStyle =this.state.container.newStyle
        styles = (newStyle+"").split(",")
        let containerLR =""
        let containerTB = ""
        let applicationLR =""
        let applicationTB = ""
        let logoTextMargin = ""
        if(styles.length == 10){
            containerLR = styles[0]
            containerTB = styles[1]
            applicationLR = styles[2]
            applicationTB = styles[3]
            logoTextMargin = styles[9]
        }
        const height2 = $(".lr_customer_application_"+id).height()
        this.setStateData({
            ctrlHeight : height2
        })

        // if(this.state.container.openPageHelper==1){
        //     this.setStateData({
        //         ctrlHeight : height2-containerTB
        //
        //     })
        // }else if(this.state.container.openPageHelper==0){
        //     this.setStateData({
        //         ctrlHeight : height2
        //     })
        // }





        const width =$(".lr_customer_application_"+id).width()
        const height = $(".lr_customer_application_"+id).height()
        $("#lr_customer_application_outer_"+id).css({width:width+"px",height: height+"px"})
        $(".lr_customer_application_inter_"+id).css({width:(width-containerLR*2)+"px",height: (height-containerTB*2)+"px"})
    }

    componentWillUpdate(){
        let {id,isSetting} = this.props
        if(id == undefined){
            id = this.props.location.query.id
        }
        if(isSetting == undefined){
            isSetting = this.props.location.query.isSetting == 'true' ? true : false
        }
        let styles = []
        let newStyle =this.state.container.newStyle
        styles = (newStyle+"").split(",")
        let containerLR =""
        let containerTB = ""
        let applicationLR =""
        let applicationTB = ""
        let logoTextMargin = ""
        if(styles.length == 10){
            containerLR = styles[0]
            containerTB = styles[1]
            applicationLR = styles[2]
            applicationTB = styles[3]
            logoTextMargin = styles[9]
        }
        const width =$(".lr_customer_application_"+id).width()
        const height = $(".lr_customer_application_"+id).height()
        $("#lr_customer_application_outer_"+id).css({width:width+"px",height: height+"px"})
        $(".lr_customer_application_inter_"+id).css({width:(width-containerLR*2)+"px",height: (height-containerTB*2)+"px"})
    }

    saveCustomApplicatin = (id)=>{
        WeaTools.callApi('/api/portal/cmsetting/insertsetinfo', 'POST', {
            moduleid : id,
            sizetype:"0",
            size:"160*160",
            isfy:"0",
            shownum:"0",
            addOption:"1",
            sortOption:"1",
            stylelr:"5,5,5,5,5,5,ffffff,/spa/portal/images/customContainerDefaultBgi.jpg,5,10",
            setting:JSON.stringify(this.state.container.setting)
        }).then((result) => {
            this.getAllData();
        })

        /*WeaTools.callApi('/api/portal/cmsetting/savesetinfo', 'POST', {"EEinfo":JSON.stringify({"moduleid":id,"titleheight": "","layout": "","shownum": "0","sizetype": "0","moduleheight": "","size": "100*100","canedit": "","scroll": "","titlecolor": "","fillet": "","showtitle": "","modulename": "","isfy":"0","data": ""})}).then((result) => {

        })*/

    }
    getAllData = ()=>{
        let {id,isSetting} = this.props
        if(id == undefined){
            id = this.props.location.query.id
        }
        if(isSetting == undefined){
            isSetting = this.props.location.query.isSetting == 'true' ? true : false
        }
        let data = []
        WeaTools.callApi('/api/portal/cmsetting/getsetinfo', 'GET', {
            moduleid:id
        }).then((result) => {
            if(result && result.EEinfo && result.EEinfo.EStyleInfo){
                const  {sizetype,size,isfy,shownum,stylelr,addOption,sortOption,setting} = result.EEinfo.EStyleInfo
                this.setStateData({
                    customApplicationSizeType:sizetype,
                    customApplicationSize:size,
                    openPageHelper:isfy,
                    pageSize:shownum,
                    newStyle:stylelr,
                    addOption:addOption,
                    sortOption:sortOption,
                    setting:JSON.parse(setting)
                })
            }
            if(result && result.EContent && result.EContent.EContentInfo){
                for(let item = 0 ; item <  result.EContent.EContentInfo.length ; item++){
                    data.push({id:result.EContent.EContentInfo[item].infoid,text:result.EContent.EContentInfo[item].name,logo:result.EContent.EContentInfo[item].icon,bgc:result.EContent.EContentInfo[item].color?"#"+result.EContent.EContentInfo[item].color:"",url:result.EContent.EContentInfo[item].linkurl,urlType:result.EContent.EContentInfo[item].urltype,showNumberUrl:result.EContent.EContentInfo[item].counturl,json:JSON.parse(result.EContent.EContentInfo[item].json),isAddModule:result.EContent.EContentInfo[item].isAddModule,createBySystem:result.EContent.EContentInfo[item].createBySystem,showOrHide:result.EContent.EContentInfo[item].showOrHide})
                }
            }
            let data4Setting = data
            data = []
            for(let i = 0 ; i< data4Setting.length ;i++){
                if(data4Setting[i].showOrHide == '1'){
                    data.push(data4Setting[i])
                }
            }
            this.setStateData({
                "data":data,
                data4Setting,
                isSystem: isSetting == true ? 1 : 0
            })

            // customApplicationSizeType:'1',
            //     customApplicationSize:"22",
            //     openPageHelper:"",
            //     pageSize:"",
        });
    }


    componentDidMount(){
        let {id,isSetting} = this.props
        if(id == undefined){
            id = this.props.location.query.id
        }
        if(isSetting == undefined){
            isSetting = this.props.location.query.isSetting == 'true' ? true : false
        }
        let styles = []
        let newStyle =this.state.container.newStyle
        styles = (newStyle+"").split(",")
        let containerLR =""
        let containerTB = ""
        let applicationLR =""
        let applicationTB = ""
        let logoTextMargin = ""
        if(styles.length == 10){
            containerLR = styles[0]
            containerTB = styles[1]
            applicationLR = styles[2]
            applicationTB = styles[3]
            logoTextMargin = styles[9]
        }



        const width =$(".lr_customer_application_"+id).width()
        const height = $(".lr_customer_application_"+id).height()
        $("#lr_customer_application_outer_"+id).css({width:width+"px",height: height+"px"})
        $(".lr_customer_application_inter_"+id).css({width:(width-containerLR*2)+"px",height: (height-containerTB*2)+"px"})

        this.setStateData({
            ctrlHeight : height
        })

        // if(this.state.container.openPageHelper==1){
        //         this.setStateData({
        //             ctrlHeight : height-containerTB
        //
        //         })
        // }else if(this.state.container.openPageHelper==0){
        //
        // }
    }


    saveManagerSetting = (isAsynSystemSetting)=>{
        let {id,isSetting} = this.props
        if(id == undefined){
            id = this.props.location.query.id
        }
        if(isSetting == undefined){
            isSetting = this.props.location.query.isSetting == 'true' ? true : false
        }
        let idsString = "";
        for(let i = 0 ;i<this.state.container.sortIds.length; i++ ){
            idsString += ","+this.state.container.sortIds[i]
        }
        if(!idsString){
            for(let i = 0 ; i<  this.state.container.data4Setting.length ;i++){
                    idsString += ","+this.state.container.data4Setting[i].id
            }
        }

        if(idsString){
            idsString = idsString.substring(1)
        }

        this.setStateData({sortIds:[]})

        let showOrHides = []
        for(let i = 0 ; i<  this.state.container.data4Setting.length ;i++){
            showOrHides.push({id:this.state.container.data4Setting[i].id,showOrHide:this.state.container.data4Setting[i].showOrHide});
        }


        WeaTools.callApi('/api/portal/cmsetting/savesetinfo', 'POST', {"EEinfo":JSON.stringify({"moduleid":id,"titleheight": 11,"layout": -1,"shownum": this.state.container.pageSize,"sizetype": this.state.container.customApplicationSizeType,"moduleheight": 12,"size": this.state.container.customApplicationSize,"canedit": 1,"scroll": 1,"titlecolor": 123213,"fillet": 20,"showtitle": 1,"modulename": "demo1","isfy":this.state.container.openPageHelper,stylelr:this.state.container.newStyle,setting:JSON.stringify(this.state.container.setting),"addOption":this.state.container.addOption,"sortOption":this.state.container.sortOption,"isAsynSystemSetting":isAsynSystemSetting,"data": idsString,"datasShowOrHide":showOrHides})}).then((result) => {
            if (result.api_status == true) {
                WeaTools.callApi('/api/portal/custommodule/deletecmodule', 'POST', {
                    "infoid ":this.state.container.deleteIds
                }).then((result) => {
                    message.success(getLabel(83551, '保存成功！'), 3);
                    this.setStateData({managerSettingVisible:false})
                    this.getAllData();
                });



            } else {
                message.error(getLabel(84544, '保存失败！'), 3);
            }
        });
    }

    setCustomApplicationButtonsVisible = (visible)=> {
        let container = {}
        if(fromData.urlType == "1"){
            fromData.url = "/wui/index.html#/main"+fromData.replaceData[0].mobxrouteurl
        }

        if(visible == true){
            container =  Object.assign(this.state.container ,{"customApplicationButtonsVisible" : visible,"globalSettingButtonsVisible" : false});

        }else{
            container =  Object.assign(this.state.container ,{"customApplicationButtonsVisible" : visible,"globalSettingButtonsVisible" : true});
        }
        this.setState({
            container
        })
    }

    setShowContainerSetting= (visible)=> {
        let container = {}


        if(visible == true){
            container =  Object.assign(this.state.container ,{"showContainerSetting" : visible,"globalSettingButtonsVisible" : false});

        }else{
            container =  Object.assign(this.state.container ,{"showContainerSetting" : visible,"globalSettingButtonsVisible" : true});
        }
        this.setState({
            container
        })
    }

    saveCustomApplicationSetting = ()=>{
        //保存
        this.setCustomApplicationButtonsVisible(false)
    }



    saveCustomApplication = (fromData)=>{
        let container = this.state.container
        let data = container.data;
       /* if(fromData.urlType == "1" && fromData.replaceData.length >0 && fromData.replaceData[0].mobxrouteurl){
            fromData.url = JSON.stringify(fromData.replaceData)
        }*/
        this.onAddSave(fromData)
    }

    updateMenu = (fromData) => {
        let {id:mid,isSetting} = this.props
        if(mid == undefined){
            mid = this.props.location.query.id
        }
        if(isSetting == undefined){
            isSetting = this.props.location.query.isSetting == 'true' ? true : false
        }
        let { id ,text,logo ,bgc,url,urlType,showNumberUrl,json,isAddModule} = fromData;
        let {text : name ,logo : pic,bgc : color,urlType : ishttp ,showNumberUrl : counturl} = fromData;
        if(color){
            color = color.substring(1)
        }
        if(id == -1){
            WeaTools.callApi('/api/portal/custommodule/saveCModules', 'POST', {
                moduleid:mid,
                "name":name,
                "icon":pic?pic:"/spa/portal/images/customApplicationDefaultLogo.png",
                "linkurl":url,
                "color" : color,
                'urltype': ishttp,
                "counturl":counturl,
                "ordernum": this.state.container.data.length+1,
                "status":"1",
                "openmode":"1",
                "json":JSON.stringify(json),
                "isAddModule":isAddModule

            }).then((result) => {
                if (result.api_status == true) {
                    message.success(getLabel(83551, '保存成功！'), 3);
                    this.getAllData();
                    this.setAddVisiable(false)

                } else {
                    message.error(getLabel(84544, '保存失败！'), 3);

                }
            });
        }else{
            WeaTools.callApi('/api/portal/custommodule/updatecmodule', 'POST', {
                    "infoid":id,
                    "name":name,
                    "icon":pic,
                    "linkurl":url,
                    "color" : color,
                    'urltype' : ishttp,
                    "counturl":counturl,
                    "openmode":"1",
                    "status":"1",
                    "json":JSON.stringify(json),
                    "isAddModule":isAddModule

                }).then((result) => {
                if (result.api_status == true) {
                    message.success(getLabel(83551, '保存成功！'), 3);
                    this.getAllData();
                    this.setAddVisiable(false)


                } else {
                    message.error(getLabel(84544, '保存失败！'), 3);

                }
            });
        }

    };

    onAddSave= (fromData)=> {
        const { id ,text,logo ,bgc,url,urlType,showNumberUrl,json} = fromData;
        const {text : name ,logo : pic,bgc : color,urlType : ishttp ,showNumberUrl : counturl} = fromData;
        let isError = false;
        if (!url) isError = true;
        if (!text.trim()) isError = true;
        if (isError) {
            message.warning(getLabel(15859, '必要信息不完整！'));
            return;
        }
        if (showNumberUrl) {
            const {user={}} = this.state.container
            let strs = showNumberUrl.split('$')
            let url = ""
            let params = {}
            for(let i = 0 ; i< strs.length ;i++){
                let firstIndex  = -1
                let lastIndex = -1
                if((firstIndex=strs[i].indexOf("{")) !=-1 && (lastIndex=strs[i].indexOf("}")) != -1){
                    let temp = strs[i].substring(firstIndex+1,lastIndex)
                    url += user[temp]
                    url += strs[i].substring(lastIndex+1)
                }else{
                    url += strs[i]
                }

            }
            strs = url.split("?")
            if(strs.length == 2){
                url = strs[0]
                let temp = strs[1].split("&")
                for(let i = 0 ;i< temp.length ;i++){
                    let tempItem = temp[i].split("=")
                    if(tempItem.length == 2){
                        params[tempItem[0]] = tempItem[1]
                    }
                }
            }
            this.doGet(url,params,fromData)
        } else {
            this.updateMenu(fromData);
        }
    }

    doGet =(url,params,fromData)=>{
        const {json} = fromData
        WeaTools.callApi(url, 'GET',params).then((result) => {
            let unread = null
            if(json.showNumberUrlResultName && json.showNumberUrlResultName != ''){
                let strs =json.showNumberUrlResultName.split(".")
                for(let i = 0; i< strs.length ; i++){
                    result = result[strs[i]]
                }
                unread = parseInt(result)

            }else{
                unread = result.unread
            }

            if (unread || unread == 0) {
                this.updateMenu(fromData);
            } else{
                this.doPost(url,params,fromData)
            }
        }).catch((ex) => {
            this.doPost(url,params,fromData)
        });
    }

    doPost = (url,params,fromData)=>{
        const {json} = fromData
        WeaTools.callApi(url, 'POST',params).then((result) => {
            let unread = null
            if(json.showNumberUrlResultName && json.showNumberUrlResultName != ''){
                let strs =json.showNumberUrlResultName.split(".")
                for(let i = 0; i< strs.length ; i++){
                    result = result[strs[i]]
                }
                unread = parseInt(result)

            }else{
                unread = result.unread
            }
            if (unread || unread == 0) {
                this.updateMenu(fromData);
            }else {
                Modal.error({
                    title: getLabel(15172, '系统提示'),
                    content: getLabel(387137, '未读数接口地址返回的数据格式错误！'),
                });
            }
        }).catch((ex) => {
            Modal.error({
                title: getLabel(15172, '系统提示'),
                content: getLabel(387138, '未读数接口地址不正确！'),
            });
        });
    }

    cancelCustomeApplicationSetting = ()=>{
        //取消
        this.setCustomApplicationButtonsVisible(false)
    }

    addCustomeApplicationExample = ()=>{

        let container =  Object.assign(this.state.container ,{"addVisiable" : true,'arrayId':-1});
        this.setState({
            container
        })

    }

    setAddVisiable = (visible)=>{
        let container

        if(visible == false){
            container =  Object.assign(this.state.container ,{"addVisiable" : visible,'arrayId':-1,"editItem":{}});
        }else{
            container = Object.assign(this.state.container ,{"addVisiable" : visible});
        }
        this.setState({
            container
        })
    }
    setAddVisiableAndEditItem = (index)=>{
        let container =  Object.assign(this.state.container ,{"addVisiable" : true,'arrayId':index,"editItem":this.state.container.data[index]});
        this.setState({
            container
        })
    }
    setAddOrEdit = (status) =>{
        let container =  Object.assign(this.state.container ,{"addOrEdit" : status});
        this.setState({
            container
        })
    }

    setStateData = (stateData)=>{
        let container =  Object.assign(this.state.container ,stateData);
        this.setState({
            container
        })
    }

    deleteApplicationById = (arrayId,id)=>{
            WeaTools.callApi('/api/portal/custommodule/deletecmodule', 'POST', {
            "infoid ":id
        }).then((result) => {
            let data = this.state.container.data;
            data.splice(arrayId)
            this.setStateData({data:data})
        });


    }


    showManagerSetting = (tf)=>{
        this.setStateData({managerSettingVisible:tf})
    }

    addSortIds = (ids)=>{
        this.setStateData({sortIds:ids})
    }

    handlerMouseEnter = ()=>{
        let {id,isSetting} = this.props
        if(id == undefined){
            id = this.props.location.query.id
        }
        if(isSetting == undefined){
            isSetting = this.props.location.query.isSetting == 'true' ? true : false
        }
        $(".lr_settingButtons_"+id).show();
    }

    handlerMouseLeave = () => {
        let {id,isSetting} = this.props
        if(id == undefined){
            id = this.props.location.query.id
        }
        if(isSetting == undefined){
            isSetting = this.props.location.query.isSetting == 'true' ? true : false
        }
        $(".lr_settingButtons_"+id).hide();
    }




    render() {
        let {id,isSetting} = this.props
        if(id == undefined){
            id = this.props.location.query.id
        }
        if(isSetting == undefined){
            isSetting = this.props.location.query.isSetting == 'true' ? true : false
        }

        const sliderSetting = {
            dots:true,
            arrows:true,
            nextArrow:<NextArrow ecId={`${this && this.props && this.props.ecId || ''}_NextArrow@c9yob6`}/>,
            prevArrow:<PrevArrow ecId={`${this && this.props && this.props.ecId || ''}_PrevArrow@wbibqf`}/>
        }

        let styles = []
        let newStyle =this.state.container.newStyle
        styles = (newStyle+"").split(",")
        let containerLR =""
        let containerTB = ""
        let applicationLR = ""
        let applicationTB = ""
        let containerRadius = ""
        let applicationDivRadius = ""
        let applicationFontColor = ""
        let containerBgi = ""
        let applicationLogoRadius = ""
        let logoTextMargin = ""
        if(styles.length == 10){
            containerLR = styles[0]
            containerTB = styles[1]
            applicationLR = styles[2]
            applicationTB = styles[3]
            containerRadius = styles[4]
            applicationDivRadius = styles[5]
            applicationFontColor = styles[6]
            containerBgi = styles[7]
            applicationLogoRadius = styles[8]
            logoTextMargin = styles[9]
        }


        const containerPadding = containerTB+"px "+containerLR+"px"
        const applicationMargin = applicationTB+"px "+applicationLR+"px"
        const containerRadiusReal = containerRadius+"px"
        const applicationDivRadiusReal = applicationDivRadius+"px"
        const applicationFontColorReal = applicationFontColor
        const containerBgiReal = containerBgi
        const applicationLogoRadiusReal = applicationLogoRadius+"px"




        let datatemp =[];
        for(let i in this.state.container.data){
            datatemp.push(this.state.container.data[i])
        }
       datatemp.push({
           id : -1,
           text : "",
           logo : "",
           bgc : "",
           url :"",
           urlType : "1",
           showNumberUrl: "11111"
       })
        /*let row
        let col
        if(this.state.container.rowCol.split("*").length >0){
               row = this.state.container.rowCol.split("*")[0]
               col = this.state.container.rowCol.split("*")[1]
        }*/

        let displayComp
            if (this.state.container.openPageHelper==1) {
                let carouselItems = [];
                for (let i = 0; i < Math.ceil(this.state.container.data.length/(this.state.container.pageSize)); i++) {
                    let items = this.state.container.data.slice(i * this.state.container.pageSize, (i + 1) * this.state.container.pageSize);
                    // 计算固定大小模式中，小模块 是否有间距
                    let w2 = $("#lr_customer_application_outer_"+this.state.container.id).width()
                    let temp = []
                    let count = 0;
                    for(let i =0 ;i< items.length ; i++){
                        let arr = (this.state.container.customApplicationSize+"").split("*");
                        let w =  0
                        let h = 0
                        if(arr.length ==1){
                            w = arr[0]
                            h = arr[0]
                        }else{
                            w = arr[0]
                            h = arr[1]
                        }
                        if(items[i].json.mandatory =='1' && items[i].json.width !='' ){
                            w = parseInt(items[i].json.width);
                            count  +=  w
                        }else{

                            count += parseInt(w)
                        }
                        if(count <= w2 ){
                            temp.push(0)
                        }else{
                            temp[temp.length-1] = 1
                            temp.push(0)
                            count = parseInt(w);

                        }
                        count += parseInt(applicationLR)*2
                    }
                    if(count > w2){
                        temp[temp.length-1] = 1

                    }

                    carouselItems.push(

                        <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@tqx590@${i}`} height={this.state.container.ctrlHeight}>
                            <div id={"lr_customer_application_outer_"+id} className="lr_customer_application_inter_div_autoWidthHeight"
                                 style={{"padding":containerPadding}}>
                                <div className={"lr_customer_application_inter_"+id} >
                                    <div className="lr_customer_application_inter_div_autoWidthHeight">
                                        {
                                            !this.state.container.customApplicationButtonsVisible ?items.map((item, index) => {
                                                return <CustomApplication ecId={`${this && this.props && this.props.ecId || ''}_CustomApplication@uuqjyf@${item.id}`} WeaThemeCenter={this.refs['WeaThemeCenter']} {... item} setStateData={this.setStateData}  items={items} isHasMargin={temp[index]} showManagerSetting={this.showManagerSetting} container={this.state.container} rowCol={this.state.container.rowCol} outIndex={i} index={index}  customApplicationFontColor={this.state.container.customApplicationFontColor}/>
                                            }) :""
                                        }

                                        {/*{*/}
                                        {/*this.state.container.customApplicationButtonsVisible == true ? (*/}
                                        {/*<div>*/}
                                        {/*<div style={{position:"absolute",bottom:'0px',height:"60px",width:'100%','text-align':'center','line-height': "60px",opacity: '0.2',"background-color":"#000"}}></div>*/}
                                        {/*<div style={{position:"absolute",bottom:'0px',height:"60px",width:'100%','text-align':'center','line-height': "60px"}}>*/}
                                        {/*<Button type="primary" style={{'margin-right':"20px","border-radius":"3px"}} onClick={this.addCustomeApplicationExample}>添加应用</Button>*/}
                                        {/*<Button type="primary"  style={{'margin-right':"20px","border-radius":"3px"}} onClick={this.saveCustomApplicationSetting}>保存</Button>*/}
                                        {/*<Button style={{"border-radius":"3px"}} onClick={this.cancelCustomeApplicationSetting}>取消</Button>*/}
                                        {/*</div></div>): ""*/}
                                        {/*}*/}
                                    </div>
                                </div>
                            </div>
                        </WeaNewScroll>

                    );
                }

                displayComp = (
                    <Slider ecId={`${this && this.props && this.props.ecId || ''}_Slider@g7curv`} {...sliderSetting} >
                        {carouselItems}
                    </Slider>
                )
            } else if(this.state.container.openPageHelper==0){

                //计算固定大小模式中，小模块 是否有间距
                let items = this.state.container.data
                let w2 = $("#lr_customer_application_outer_"+this.state.container.id).width()
                let temp = []
                let count = 0;
                for(let i =0 ;i< items.length ; i++){
                    let arr = (this.state.container.customApplicationSize+"").split("*");
                    let w =  0
                    let h = 0
                    if(arr.length ==1){
                        w = arr[0]
                        h = arr[0]
                    }else{
                        w = arr[0]
                        h = arr[1]
                    }
                    if(items[i].json.mandatory =='1' && items[i].json.width !='' ){
                        w = parseInt(items[i].json.width);
                        count  +=  w
                    }else{

                        count += parseInt(w)
                    }
                    if(count <= w2 ){
                        temp.push(0)
                    }else{
                        temp[temp.length-1] = 1
                        temp.push(0)
                        count = parseInt(w);

                    }
                    count += parseInt(applicationLR)*2
                }
                if(count > w2){
                    temp[temp.length-1] = 1

                }
               /* for(let i =0 ;i< items.length ; i++){
                    let arr = (this.state.container.customApplicationSize+"").split("*");
                    let w =  0
                    let h = 0
                    if(arr.length ==1){
                        w = arr[0]
                        h = arr[0]
                    }else{
                        w = arr[0]
                        h = arr[1]
                    }
                    if(items[i].json.mandatory =='1' && items[i].json.width !='' ){
                        count  += parseInt(items[i].json.width)
                    }else{

                        count += parseInt(w)
                    }
                    if(count <= w2 ){
                        if(i==0){
                            temp.push(0)
                        }else{
                            temp.push(1)
                        }
                    }else{
                        if(temp[temp.length-1] == 1){
                            temp[temp.length-1] = 2
                        }else if(temp[temp.length-1] == 0){
                            temp[temp.length-1] = 4
                        }
                        temp.push(0)
                        count = parseInt(w);

                    }
                    count += parseInt(applicationLR)*2
                }
                if(count > w2){
                    if(temp[temp.length-1]==1){
                        temp[temp.length-1] = 2
                    }else if(temp[temp.length-1] == 0){
                        temp[temp.length-1] = 4
                    }

                }*/
                displayComp =(

                    <div className={"lr_customer_application_inter_"+id} >


                        <div className="lr_customer_application_inter_div_autoWidthHeight" >

                            {
                                !this.state.container.customApplicationButtonsVisible ?this.state.container.data.map((item, index) => {
                                    return <CustomApplication ecId={`${this && this.props && this.props.ecId || ''}_CustomApplication@mxfsdr@${item.id}`} WeaThemeCenter={this.refs['WeaThemeCenter']} {... item} setStateData={this.setStateData} items={items} isHasMargin={temp[index]} showManagerSetting={this.showManagerSetting} container={this.state.container} rowCol={this.state.container.rowCol} index={index} customApplicationFontColor={this.state.container.customApplicationFontColor}/>
                                }) :""
                            }

                            {/*{*/}
                            {/*this.state.container.customApplicationButtonsVisible == true ? (*/}
                            {/*<div>*/}
                            {/*<div style={{position:"absolute",bottom:'0px',height:"60px",width:'100%','text-align':'center','line-height': "60px",opacity: '0.2',"background-color":"#000"}}></div>*/}
                            {/*<div style={{position:"absolute",bottom:'0px',height:"60px",width:'100%','text-align':'center','line-height': "60px"}}>*/}
                            {/*<Button type="primary" style={{'margin-right':"20px","border-radius":"3px"}} onClick={this.addCustomeApplicationExample}>添加应用</Button>*/}
                            {/*<Button type="primary"  style={{'margin-right':"20px","border-radius":"3px"}} onClick={this.saveCustomApplicationSetting}>保存</Button>*/}
                            {/*<Button style={{"border-radius":"3px"}} onClick={this.cancelCustomeApplicationSetting}>取消</Button>*/}
                            {/*</div></div>): ""*/}
                            {/*}*/}


                        </div>
                    </div>
                )
            }

        return (
                <div className={"lr_customer_application_"+id+" lr_customer_application_class"} onMouseEnter={this.handlerMouseEnter} onMouseLeave={this.handlerMouseLeave} style={{'background-image':'url('+containerBgiReal+')','border-radius':containerRadiusReal}}>
                    {
                        this.state.container.openPageHelper==0 ? (<WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@e59ufs`} height={this.state.container.ctrlHeight}>
                            <div id={"lr_customer_application_outer_"+id} className="lr_customer_application_inter_div_autoWidthHeight"
                                 style={{"padding":containerPadding}}>
                                {displayComp}
                            </div>
                        </WeaNewScroll>):(
                            <div style={{width:'100%',height:'100%'}}>
                                 {displayComp}
                            </div>
                        )

                    }
                    {
                            isSetting == true ?( <div className={"lr_settingButtons_"+id +" lr_settingButtons_class"} >

                            <span className="icon-coms-Flow-setting  lr_settingButtons_span_class"  onClick={() => {
                                this.showManagerSetting(true)
                            }}></span>

                        </div>):((this.state.container.addOption==1 || this.state.container.sortOption == 1)?(<div className={"lr_settingButtons_"+id+"  lr_settingButtons_class"} >

                            <span className="icon-coms-Flow-setting  lr_settingButtons_span_class"  onClick={() => {
                                this.showManagerSetting(true)
                            }}></span>

                        </div>):"")
                    }

                    <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@8e03cd`}
                        title="应用设置"
                        visible={this.state.container.customApplicationButtonsVisible }
                        iconBgcolor='#1a57a0'
                        hasScroll={true}
                        style={{width: 900,height : 600}}
                        onCancel={()=>{this.setCustomApplicationButtonsVisible(false)}}
                    >

                        <div id="customApplications" style={{'background-image':'url('+this.state.container.img+')'}}>
                            <DragSort ecId={`${this && this.props && this.props.ecId || ''}_DragSort@fnwzdf`} data={datatemp} setStateData={this.setStateData} container={this.state.container} addCustomeApplicationExample={this.addCustomeApplicationExample} deleteApplicationById={this.deleteApplicationById} setAddVisiableAndEditItem={this.setAddVisiableAndEditItem}/>
                        </div>
                    </WeaDialog>
                    <WeaThemeCenter ecId={`${this && this.props && this.props.ecId || ''}_WeaThemeCenter@asvx99`} ref="WeaThemeCenter"/>
                    <ContainerSetting ecId={`${this && this.props && this.props.ecId || ''}_ContainerSetting@n4sky6`} saveCustomContainerSetting={this.saveCustomContainerSetting} setShowContainerSetting={this.setShowContainerSetting} data={{"rowCol":this.state.container.rowCol,"showContainerSetting":this.state.container.showContainerSetting}}></ContainerSetting>
                    <AddCustomApplication ecId={`${this && this.props && this.props.ecId || ''}_AddCustomApplication@2nfi8v`}  addVisiable={this.state.container.addVisiable} arrayId={this.state.container.arrayId} setAddVisiable={this.setAddVisiable} saveCustomApplication={this.saveCustomApplication} setStateData={this.setStateData} data={this.state.container.editItem} setting={this.state.container.setting}></AddCustomApplication>
                    <ManagerSetting ecId={`${this && this.props && this.props.ecId || ''}_ManagerSetting@ykwi02`} getAllData={this.getAllData} setAddVisiableAndEditItem={this.setAddVisiableAndEditItem} saveManagerSetting={this.saveManagerSetting} addSortIds={this.addSortIds} container={this.state.container} setStateData={this.setStateData} addCustomeApplicationExample={this.addCustomeApplicationExample}></ManagerSetting>


            </div>
        );
      /*  return (
            <WeaDialog
                title="应用设置"
                visible={true }
                iconBgcolor='#1a57a0'
                hasScroll={true}
                style={{width: 1200,height : 600}}
                onCancel={()=>{this.setCustomApplicationButtonsVisible(false)}}
            >

               <Dg></Dg>



            </WeaDialog>
        )*/
    }


    saveApplicationShare = () =>{
        let aa = [{
            includeSub:false,  //包含下级
            jobShareLevel: "1", //岗位级别（1、2、3 总部、指定部门、指定分部）
            jobShareValue: "", // 岗位级别为指定部门、指定分部、选中的部门、分部id
            key: -2,
            roleLevel: "0",  //角色级别(0、1、2 部门、分部、总部)
            securityLevel: "0-100",  //安全级别
            securityMaxLevel: 100,  //安全级别max
            securityMinLevel: 0,    //安全级别min
            shareType: "2",         //共享类型id（部门3、分部2、所有人7、人力资源1、角6、岗位8...）
            shareTypeName: "分部",  //共享类型name
            shareValue: "1,157,186", //类型对象id(如部门id。。)
            shareValueName: "支撑服务本部,EBU事业本部,e-office事业本部(含下级)"  //类型对象name
        }]

        const shareValues = this.refs['tab4Share'] ? this.refs['tab4Share'].getSaveValues() : {};
        let shareList = []
        if(shareValues&&shareValues.eShareList){
           for(let i in shareValues.eShareList){
               let sharetype =""
               let sharevalue =""
               let sharelevel = ""
               let appointvalue = ""
               let element = ""
               let app = ""
               let content = ""
               let operatelevel = ""
               let securityminlevel = ""
               let securitymaxlevel = ""
               if(shareValues.eShareList[i].shareType=='3'){


                   sharetype = shareValues.eShareList[i].shareType
                   sharevalue   =  shareValues.eShareList[i].shareValue
                   securityminlevel = shareValues.eShareList[i].securityMinLevel
                   securitymaxlevel = shareValues.eShareList[i].securityMaxLevel
               }else if(shareValues.eShareList[i].shareType=='2'){
                   sharetype = shareValues.eShareList[i].shareType
                   sharevalue   =  shareValues.eShareList[i].shareValue
                   securityminlevel = shareValues.eShareList[i].securityMinLevel
                   securitymaxlevel = shareValues.eShareList[i].securityMaxLevel
               }else if(shareValues.eShareList[i].shareType=='7'){
                   sharetype = shareValues.eShareList[i].shareType
                   securityminlevel = shareValues.eShareList[i].securityMinLevel
                   securitymaxlevel = shareValues.eShareList[i].securityMaxLevel
               }else if(shareValues.eShareList[i].shareType=='1'){
                   sharetype = shareValues.eShareList[i].shareType
                   sharevalue   =  shareValues.eShareList[i].shareValue
               }else if(shareValues.eShareList[i].shareType=='6'){
                   sharetype = shareValues.eShareList[i].shareType
                   sharevalue   =  shareValues.eShareList[i].shareValue
                   sharelevel =  shareValues.eShareList[i].roleLevel==1?1:(shareValues.eShareList[i].roleLevel==2?0:2)
                   securityminlevel = shareValues.eShareList[i].securityMinLevel
                   securitymaxlevel = shareValues.eShareList[i].securityMaxLevel
               }else if(shareValues.eShareList[i].shareType=='8'){
                   sharetype = shareValues.eShareList[i].shareType
                   sharevalue   =  shareValues.eShareList[i].shareValue
                   sharelevel =  shareValues.eShareList[i].jobShareLevel-1
                   if(sharelevel!=0){
                       appointvalue = shareValues.eShareList[i].jobShareValue
                   }
                   securityminlevel = shareValues.eShareList[i].securityMinLevel
                   securitymaxlevel = shareValues.eShareList[i].securityMaxLevel
               }
               shareList.push({
                   sharetype,
                   sharevalue,
                   sharelevel,
                   appointvalue,
                   element,
                   app,
                   content,
                   operatelevel,
                   securityminlevel,
                   securitymaxlevel
               })

           }
        }
        //调用共享数据保存接口
        WeaTools.callApi('/api/portal/setting/saveSetting', 'POST', {
            jsonStr : JSON.stringify({...shareValues})

        }).then(result => {
            if(result.api_status = true){
                message.success(getLabel(83551, '保存成功！',3))
                this.setStateData({shareVisible:false})
            }else{
                message.error(getLabel(84544, '保存失败！'), 3)
            }

        });
    }
    getButtons= ()=> {
        let onAddSave = this.props.saveCustomApplication

        let btns = [];
        btns.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@5996zk@Submit`} type="primary" onClick={()=>{this.saveApplicationShare}}>{getLabel(30986, '保存')}</Button>);
        btns.push(<WeaMoreButton ecId={`${this && this.props && this.props.ecId || ''}_WeaMoreButton@w675my@RightMenus`} datas={this.getRightMenus()}/>);
        return btns;
    }
    getRightMenus=()=> {
        let onAddSave = this.props.saveCustomApplication
        let btns = [];
        btns.push({key: '1', icon: <i className="icon-coms-Preservation"/>, content: getLabel(30986, '保存'), onClick: ()=>{this.saveApplicationShare}});
        return btns;
    }

    saveCustomContainerSetting = (data)=>{
        this.setStateData({"rowCol":data.rowCol})
        this.setShowContainerSetting(false)
    }

}
function PrevArrow(props){
    const {onClick,className,style} = props
    return (
        <div className={className} style={{...style,left:'0px','z-index':'1'}} onClick={onClick} ></div>
    )
}
function NextArrow(props){
    const {onClick,className,style} = props
    return (
        <div className={className} style={{...style,right:'0px'}}   onClick={onClick}></div>
    )
}

export default CustomContainer;